<template>
<div class="system-role">
    <el-table :data="tableData">
        <el-table-column v-for="item in tableColumn" :key="item.label" :label="item.label" :prop="item.key"
        align="center"
        ></el-table-column>
       <el-table-column
        fixed="right"
        label="操作"
        width="200"
        align="center"
        >
        <template slot-scope="scope">
            <el-button @click="showAuthorizationDialog(scope.row)" type="text" size="small">修改权限</el-button>
            <span class="split-line"></span>
            <el-button type="text" size="small" @click="associatedUser(scope.row)">关联用户</el-button>
        </template>
        </el-table-column>
    </el-table>
    <menu-auth-dialog @closeAuthorization="showAuthorization = false" :showDialog="showAuthorization" :userInfo="currentUserInfo"></menu-auth-dialog>
</div>
</template>
<script>
import MenuAuthDialog from './MenuAuthDialog'
export default {
    name: 'RoleHome',
    components: {
        MenuAuthDialog
    },
    data () {
        return {
            tableData: [
                {
                    name: '1'
                }
            ],
            tableColumn: [
                {
                    label: '角色名称',
                    key: 'name'
                },
                {
                    label: '角色描述',
                    key: 'name'
                },
                {
                    label: '创建时间',
                    key: 'name'
                },
                {
                    label: '修改时间',
                    key: 'name'
                }

            ],
            showAuthorization: false,
            currentUserInfo: {}
        }
    },
    methods: {
        showAuthorizationDialog (item) {
            this.currentUserInfo = item
            this.showAuthorization = true
        },
        associatedUser (item) {
            this.$router.push('/system/role/relate')
        }
    }
}
</script>

<style lang="less">
.system-role {
    .split-line {
        display: inline-block;
        width: 1px;
        height: 20px;
        background: #409EFF;
        vertical-align: middle;
    }
}
</style>
